<template>
  <view class="easyCLearSnowPack">
    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="easyClearSnowPack-content" :style="[{'top': top + 'px'}]">
      <view class="ec-tab">
        <view class="ect-item">
          <hpy-form-select :title="cityTitle" @change="changeCityVal()" :dataList="cityList" text="dictLabel"
            name="dictValue" v-model="selectParam.city" />
        </view>
        <view class="ect-item">
          <hpy-form-select :title="snowPackTitle" @change="changeSnowPackVal()" :dataList="snowPackParamList"
            text="slopeName" name="slopeId" v-model="selectParam.slopeId" />
        </view>
      </view>
      <view class="ec-content">
        <view class="snowpack-list">
          <view class="snowpack-item" @click="toSnowPackIntro(item.slopeId)" v-for="(item,index) in showList"
            :key="index">
            <view class="si-img">
              <image :src="getImage(item.photo)" mode=""></image>
            </view>
            <view class="si-right">
              <view class="sir-name-grade">
                <view class="sir-name">
                  {{item.slopeName}}
                </view>
				<!-- 
                <view class="sir-grade">
                  <view class="grade-score">
                    {{item.score}}
                  </view>
                  <view class="grade-title">
                    分
                  </view>
                </view>
				-->
              </view>
              <view class="sir-snowpack-num" v-if="(item.statisticsVoList[0].num+item.statisticsVoList[1].num+item.statisticsVoList[2].num)">
                <view class="sirs-item" v-if="item.statisticsVoList[0].num">
                  <view class="sirsi-name junior">
                    初级道
                  </view>
                  <view class="sirsi-num">
                    {{item.statisticsVoList[0].num}}条
                  </view>
                </view>
                <view class="sirs-item" v-if="item.statisticsVoList[1].num">
                  <view class="sirsi-name mid">
                    中级道
                  </view>
                  <view class="sirsi-num">
                    {{item.statisticsVoList[1].num}}条
                  </view>
                </view>
                <view class="sirs-item" v-if="item.statisticsVoList[2].num">
                  <view class="sirsi-name senior">
                    高级道
                  </view>
                  <view class="sirsi-num">
                    {{item.statisticsVoList[2].num}}条
                  </view>
                </view>
              </view>
			  <view class="sir-snowpack-num" v-else style="font-size: 18rpx;">
				  暂未统计雪道信息
			  </view>
              <view class="sir-city-address">
                <image src="/myPackageA/static/easyClear/ski-pos.png" mode=""></image>
			<view style="white-space:normal;width: 75rpx;">
                {{item.city}}
			</view>
                <view class="" style="margin: 0 6rpx;"> | </view>
				<view style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:320rpx;">
				{{item.address ? item.address : '-'}}
				</view>
              </view>
            </view>
          </view>
          <i-divider v-if="showList.length > 0" :loadingType="loadingType"></i-divider>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        top: 0,
        loadingType: 0, //加载文字类型
        childTitle: '滑雪场',
        cityTitle: '城市',
        snowPackTitle: '雪场',
        selectParam: {
          pageNum: 1,
          pageSize: 10
        },
        cityList: [], //城市下拉
        snowPackParamList: [], //雪场下拉
        snowpackList: [],
        showList: [],
        totalPage: 0
      }
    },
    onLoad(options) {
		console.log(options)
      if (options.city) {
        this.selectParam.city = options.city
      }
      this.getCityTypeList(); //获取城市下拉
      this.getSnowPackList(true); //获取雪场下拉
      // this.getSnowPackList();/
    },
    // 上拉分页
    onReachBottom() {
      this.selectParam.pageNum++;
      if (this.loadingType !== 0) {
        return false;
      }
      this.loadingType = 1;
      this.getSnowPackList()
    },
    methods: {
		onShareAppMessage() {
		return {
		    title: '滑雪场',
		    imageUrl: this.img,
		  }
		},
		onShareTimeline() {
		  return {
		    title: '滑雪场',
		    imageUrl: this.img,
		  }
		},
	getImage(titleImg) {
	  if (titleImg && titleImg.includes(",")) {
	    let imageList = titleImg.split(",");
	    return imageList[0];
	  } else {
	    return titleImg
	  }
	},
      // 城市下拉切换
      changeCityVal(e) {
        console.log(e.value)
        this.snowpackList = [] //切换城市后数据重新赋值空值
        this.showList = []
        // 分页赋值初始值
        this.selectParam.pageNum = 1;
        this.selectParam.city = e.value
        // 雪场清空重新来
        Reflect.deleteProperty(this.selectParam, 'slopeId')
        this.getSnowPackList(true)
      },
      // 雪场下拉切换
      changeSnowPackVal(e) {
        this.filterSnowPackList(e.value)
      },
      // 雪场下拉后直接过滤雪场列表即可
      filterSnowPackList(val) {
        this.showList = this.snowpackList.filter(item => item.slopeId == val)
      },
      // 获取到雪场下拉列表
      getSnowPackList(val) {
        let _this = this
        console.log(_this.snowpackList)
        uni.request({
          url: _this.$httpApi.install.getSkiList,
          method: 'GET',
          data: _this.selectParam,
          success(res) {
			    console.log(res)
            if (res.data.code == 200) {
              // 如果是初始化，需要赋值雪场下拉
              if (val) {
                _this.snowPackParamList = res.data.rows
              }
              // 分页
              if (res.data.rows.length == 0) { //没有数据
                _this.loadingType = 2;
                uni.showToast({
                  title: '暂无数据',
                  icon: 'none',
                  duration: 2000
                })
                return;
              }
             _this.totalPage = Math.ceil(res.data.total / _this.selectParam.pageSize)
             // 不足分页数量
             if (_this.selectParam.pageNum >= _this.totalPage) {
                _this.loadingType = 2;
              } else {
                _this.loadingType = 0; //将loadingType归0重置
              }
              // 赋值
              _this.snowpackList = _this.snowpackList.concat(res.data.rows)
              _this.showList = _this.snowpackList
            } else {
              console.log(res.msg)
            }
          },
          fail(error) {

          },
        })
      },
      // 获取到城市下拉列表
      getCityTypeList() {
        let _this = this
        uni.request({
          url: _this.$httpApi.install.getCity + 'ski_city',
          method: 'GET',
          success(res) {
            if (res.data.code == 200) {
              console.log(res)
              _this.cityList = res.data.data
            } else {
              console.log(res.msg)
            }
          },
          fail(error) {

          },
        })
      },
      // 跳转到雪场介绍页面
      toSnowPackIntro(id) {
        uni.navigateTo({
          url: '/myPackageA/pages/snowPackIntro/snowPackIntro?snowPackId=' + id
        })
      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background-color: #F8FAFE;
  }
</style>
<style lang="scss" scoped>
  .easyClearSnowPack-content {
    width: 100%;
    position: absolute;

    .ec-tab {
      width: 100%;
      padding: 10rpx 40rpx;
      display: flex;

      .ec-title {
        font-size: 28rpx;
        color: #303030;
        max-width: 210rpx;
        overflow: hidden;
        /*超出部分隐藏*/
        white-space: nowrap;
        /*禁止换行*/
        text-overflow: ellipsis;
        /*省略号*/
      }

      .ec-img {
        width: 24rpx;
        height: 24rpx;
        background: #EAEDF2;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 17rpx;

        image {
          width: 20rpx;
          height: 20rpx;
        }
      }

      .ect-item {
        display: flex;
        align-items: center;
        justify-content: center;

        &:nth-child(n+2) {
          margin-left: 60rpx;
        }
      }
    }

    .ec-content {
      padding: 0 30rpx;

      .snowpack-list {
        .snowpack-item {
          width: 690rpx;
          // height: 200rpx;
          padding: 10rpx 0;
          background: #FFFFFF;
          border-radius: 20rpx;
          display: flex;
              align-items: center;
          margin-bottom: 40rpx;
          position: relative;

          &::after {
            content: '';
            width: 690rpx;
            height: 2rpx;
            background-color: rgba(145, 164, 178, 0.2);
            position: absolute;
            bottom: -20rpx;
          }

          &:last-of-type {
            margin-bottom: 0;

            &::after {
              content: none;
            }
          }

          .si-img {
            width: 200rpx;
            height: 200rpx;
            border-radius: 20rpx;

            image {
              width: 100%;
              height: 100%;
              border-radius: 20rpx;
            }
          }

          .si-right {
            margin-left: 20rpx;
            padding-right: 24rpx;
            flex: 1;

            .sir-name-grade {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 20rpx;

              .sir-name {
                font-size: 32rpx;
                font-weight: bold;
                color: #303030;
              }

              .sir-grade {
                display: flex;
                align-items: baseline;

                .grade-score {
                  font-size: 32rpx;
                  font-weight: bold;
                  color: #FF3D3D;
                }

                .grade-title {
                  margin-left: 5rpx;
                  font-size: 20rpx;
                  color: #FF3D3D;
                }
              }
            }

            .sir-snowpack-num {
              margin-top: 24rpx;
              display: flex;
		

              .sirs-item {
                display: flex;
                width: 144rpx;
                height: 34rpx;
                background: #EFF1F4;
                border-radius: 17rpx 17rpx 17rpx 17rpx;
                padding: 0 10rpx 0 25rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .sirsi-name {
                  font-size: 18rpx;
                  color: #595959;
                }

                .sirsi-num {
                  font-size: 18rpx;
                  font-weight: bold;
                  color: #303030;
                }
              }

              .junior {
                position: relative;

                &::before {
                  content: '';
                  width: 10rpx;
                  height: 10rpx;
                  border-radius: 50%;
                  background: #88F79C;
                  position: absolute;
                  top: 9rpx;
                  left: -16rpx;
                }
              }

              .mid {
                position: relative;

                &::before {
                  content: '';
                  width: 10rpx;
                  height: 10rpx;
                  border-radius: 50%;
                  background: #5D87ED;
                  position: absolute;
                  top: 9rpx;
                  left: -16rpx;
                }
              }

              .senior {
                position: relative;

                &::before {
                  content: '';
                  width: 10rpx;
                  height: 10rpx;
                  border-radius: 50%;
                  background: #303030;
                  position: absolute;
                  top: 9rpx;
                  left: -16rpx;
                }
              }

            }

            .sir-city-address {
              display: flex;
              align-items: center;
              font-size: 22rpx;
              color: #595959;
              margin-top: 30rpx;

              image {
                margin-right: 5rpx;
                width: 18rpx;
                height: 20rpx;
              }
            }
          }
        }
      }
    }

  }

</style>